<#include "/common/_layout.html"/>
<@layout>
	<script type="text/javascript">
		//判断当前窗口是否有顶级窗口，如果有就让当前的窗口的地址栏发生变化
		//这样就可以让登陆窗口显示在整个窗口了
		if(window.top != null && window.top.location.href != window.location.href) {
			window.top.location.href = window.location.href;
		}
	</script>

	<style>
		.login-container {
			background-clip: padding-box;
			width: 350px;
			padding: 35px 35px 20px 35px;
			background: #fff;
		}
		
		.login-container .title {
			margin: 0px auto 40px auto;
			text-align: center;
			color: #505458;
		}
		
		.login-container .remember {
			margin: 0px 0px 35px 0px;
		}
		
		.el-form-item__content {
			width: 100%;
		}
		
		.main_box {
			margin: 60px auto;
			width: 880px;
			padding: 80px 150px;
			background-image: url(../common/images/login_bg.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			-moz-background-size: 100% 100%;
		}
		
		a {
			color: #939393;
			font-size: 12px;
			text-decoration: none;
		}
		
		a:hover,
		a:focus {
			color: #F60;
			text-decoration: underline;
		}
		
		a:-webkit-any-link {
			cursor: pointer;
			text-decoration: none;
		}
		
		body {
			background-color: #c6eeff;
		}
		
		html {
			overflow: hidden;
		}
	</style>
	<div id="app">
		<div class="main_box">
			<div style="margin: 70px 80px 75px 80px;" align="center">
				<el-row style="margin-bottom: 15px;">
					<el-form ref="loginForm" :rules="rules" :model="loginForm" label-width="0px" class="login-container">
						<h3 class="title">登录</h3>
						<el-form-item prop="account">
							<el-input type="text" v-model="loginForm.account" placeholder="用户名" @keyup.enter.native="submitForm"></el-input>
						</el-form-item>
						<el-form-item prop="pwd">
							<el-input type="password" v-model="loginForm.pwd" auto-complete="off" placeholder="密码" @keyup.enter.native="submitForm"></el-input>
						</el-form-item>
						<el-form-item prop="vcode">
							<el-input type="text" v-model="loginForm.vcode" placeholder="请输入验证码" @keyup.enter.native="submitForm">
								<template slot="append">
									<img style="height:32px;margin-top: 3px;" @click="refreshCode" :src="imageCodeUrl" />
								</template>
							</el-input>
						</el-form-item>
						<el-form-item style="width:100%;margin-top: 36px;">
							<el-button type="primary" style="width:100%;" @click="submitForm" :loading="loginForm.logining">登录</el-button>
						</el-form-item>
						<span style="font-size: 12px;color: #939393;">Copyright © 2018 quanhuang98.com</span>
						<div>
							<a style="font-size: 12px;;" href="http://www.miibeian.gov.cn/" target="_blank" class="text">湘ICP备18016084号</a>
						</div>
						<div style="width:300px;margin:0 auto; padding:0px 0;">
							<a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=43010402000597" style="display:inline-block;height:20px;line-height:20px;">
								<img src="${ctx}/common/images/ic_ba.png" style="float:left;margin-right: 5px;" />
								湘公网安备 43010402000597号
							</a>
						</div>
					</el-form>
				</el-row>
			</div>

		</div>
	</div>

	<script type="text/javascript">
		new Vue({
			el: '#app',
			data: function() {
				return {
					cache: 0,
					visible: false,
					loginForm: {
						logining: false,
						account: '',
						pwd: '',
						vcode: ''
					},
					rules: {
						account: [{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						}],
						pwd: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						}],
						vcode: [{
							required: true,
							message: '请输入验证码',
							trigger: 'blur'
						}]
					}
				}
			},
			computed: {
				imageCodeUrl: function() {
					return "${ctx}/validateImg/" + this.cache;
				},
			},
			methods: {
				refreshCode: function() {
					this.cache++;
				},
				submitForm: function(formName) {
					var _that = this;
					this.$refs.loginForm.validate(function(valid) {
						if(valid) {
							_that.loginForm.logining = true;
							var loginParams = {
								userCode: _that.loginForm.account,
								userPwd: _that.loginForm.pwd,
								vcode: _that.loginForm.vcode
							};

							$.ajax({
								url: "${ctx}/dologin",
								type: "POST",
								data: loginParams,
								cache: false,
								success: function(data) {
									successHandle(data, function(data) {
										window.location.href = "${ctx}/home";
									}, function(data) {
										_that.$message({
											message: data.msg,
											type: 'error'
										});
									});

								},
								error: function(xhr, msg, e) {
									_that.$message({
										message: "登录失败",
										type: 'error'
									});
								},
								complete: function() {
									_that.loginForm.logining = false;
									_that.loginForm.vcode = "";
									_that.refreshCode();
								}
							});
						} else {
							return false;
						}
					});
				}
			}
		});
	</script>
</@layout>